<template>
  <el-card :style="`height:${view.height - 140}px`">
    <el-tabs v-model="activeTab" type="card">
      <!-- 变化检测 -->
      <el-tab-pane label="变化检测" name="changeDetection">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="model in changeDetectionModels"
            :key="model.id"
          >
            <model-card
              :icon="model.icon"
              :name="model.name"
              :description="model.description"
              :uploadUnit="model.uploadUnit"
              :associatedModels="model.associatedModels"
              :status="model.status"
              :createdTime="model.createdTime"
              :usageStats="model.usageStats"
              :complexity="model.complexity"
              :trainingDataVolume="model.trainingDataVolume"
              :accuracy="model.accuracy"
              :lastUpdate="model.lastUpdate"
            />
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 目标检测 -->
      <el-tab-pane label="目标检测" name="targetDetection">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="model in targetDetectionModels"
            :key="model.id"
          >
            <model-card
              :icon="model.icon"
              :name="model.name"
              :description="model.description"
              :uploadUnit="model.uploadUnit"
              :associatedModels="model.associatedModels"
              :status="model.status"
              :createdTime="model.createdTime"
              :usageStats="model.usageStats"
              :complexity="model.complexity"
              :trainingDataVolume="model.trainingDataVolume"
              :accuracy="model.accuracy"
              :lastUpdate="model.lastUpdate"
            />
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 地物分类 -->
      <el-tab-pane label="地物分类" name="landCoverClassification">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="model in landCoverClassificationModels"
            :key="model.id"
          >
            <model-card
              :icon="model.icon"
              :name="model.name"
              :description="model.description"
              :uploadUnit="model.uploadUnit"
              :associatedModels="model.associatedModels"
              :status="model.status"
              :createdTime="model.createdTime"
              :usageStats="model.usageStats"
              :complexity="model.complexity"
              :trainingDataVolume="model.trainingDataVolume"
              :accuracy="model.accuracy"
              :lastUpdate="model.lastUpdate"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import modelCard from "./modelCard.vue"; // 子组件路径
import { reactive, ref } from "vue";

// 当前激活的 Tab
const activeTab = ref("changeDetection");
var view = reactive({
  height: window.innerHeight,
});
/* // 模型数据
const changeDetectionModels = reactive([
  {
    id: 1,
    icon: "https://t8.baidu.com/it/u=3719734923,2875480168&fm=193",
    name: "变化检测模型 Alpha",
    description: "检测地表变化的模型。",
    uploadUnit: "单位 A",
    associatedModels: [
      { name: "引擎 1", version: "1.0", color: "success" },
    ],
    status: "正常",
    createdTime: "2025-01-01",
    usageStats: 120,
    complexity: "高",
    trainingDataVolume: "10GB",
    accuracy: 98,
    lastUpdate: "2025-01-10",
  },
]);

const targetDetectionModels = reactive([
  {
    id: 1,
    icon: "https://t8.baidu.com/it/u=3719734923,2875480168&fm=193",
    name: "目标检测模型 Beta",
    description: "高效的目标检测模型。",
    uploadUnit: "单位 B",
    associatedModels: [
      { name: "引擎 3", version: "1.5", color: "info" },
    ],
    status: "维护中",
    createdTime: "2025-01-05",
    usageStats: 150,
    complexity: "中等",
    trainingDataVolume: "5GB",
    accuracy: 90,
    lastUpdate: "2025-01-12",
  },
]);

const landCoverClassificationModels = reactive([
  {
    id: 1,
    icon: "https://t8.baidu.com/it/u=3719734923,2875480168&fm=193",
    name: "地物分类模型 Gamma",
    description: "用于地物分类的模型。",
    uploadUnit: "单位 C",
    associatedModels: [
      { name: "引擎 5", version: "3.0", color: "primary" },
    ],
    status: "正常",
    createdTime: "2025-01-07",
    usageStats: 200,
    complexity: "低",
    trainingDataVolume: "2GB",
    accuracy: 85,
    lastUpdate: "2025-01-15",
  },
]); */

const generateModels = (type, length, startId, iconUrl, unitPrefix) => {
  return Array.from({ length }, (_, i) => ({
    id: startId + i,
    icon: iconUrl,
    name: `${type} 模型 ${i + 1}`,
    description: `${type} 模型 ${i + 1} 提供了创新的解决方案。${i % 2 === 0 ? "适用于复杂环境分析。" : "支持实时功能优化。"}`,
    uploadUnit: `${unitPrefix}${i + 1}`,
    associatedModels: [
      { name: `引擎 Beta ${i + 1}`, version: `${(2.0 + i * 0.2).toFixed(2)}`, color: i % 2 === 0 ? "success" : "primary" },
    ],
    status: i % 3 === 0 ? "正常" : i % 3 === 1 ? "维护中" : "测试中",
    createdTime: `2025-01-${String(i + 1).padStart(2, '0')}`,
    usageStats: 500 + i * 20,
    complexity: i % 2 === 0 ? "高" : "中等",
    trainingDataVolume: `${5 + i}GB`,
    accuracy: 80 + i,
    lastUpdate: `2025-01-${String(i + 15).padStart(2, '0')}`,
  }));
};

// 示例生成不同类型的模型
const changeDetectionModels = ref(generateModels(
  "变化检测", 6, 1,
  "https://t8.baidu.com/it/u=3719734923,2875480168&fm=193",
  "单位 A"
));

const targetDetectionModels = ref(generateModels(
  "目标检测", 6, 10,
  "https://t8.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  "单位 B"
));

const landCoverClassificationModels = ref(generateModels(
  "地物分类", 6, 20,
  "https://img0.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  "单位 C"
));
</script>

<style scoped>
h2 {
  margin: 0;
  padding: 10px;
}

.el-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #dcdcdc;
}

.el-main {
  padding: 20px;
}
</style>
